<template>
    <ul class="l_tree">
        <li class="l_tree_branch" v-for="item in data" :key="item.basicInfo.taskId">
            <div class="l_tree_click">
                <i class="l_tree_children_btn" :class="'l_'+item.basicInfo.taskId"
                   v-if="item.children  && item.children.length > 0" @click="toggleNode(item)">
                    <!--                    {{!item.show ? '-' : '+' }}-->
                    <i v-if="item.show" class="el-icon-remove-outline" style="font-size: 18px;color: #7B7B7B"></i>
                    <i v-else class="el-icon-circle-plus-outline" style="font-size: 18px;color: #7B7B7B"></i>
                </i>

                <button type="button" class="l_tree_children_btn_not" v-else>
                </button>

                <el-tooltip v-if="item.basicInfo.title.length > 20" class="item" effect="dark"
                            :content="item.basicInfo.title" placement="bottom">
                     <span class="folder folder1" :class="item.basicInfo.taskId" @click="toggle(item)"
                           style="font-size: 14px">{{ item.basicInfo.title }}</span>
                </el-tooltip>
                <span v-else class="folder" :class="item.basicInfo.taskId" @click="toggle(item)"
                      style="font-size: 14px">{{ item.basicInfo.title }}</span>
                <!--<span class="process"
                      v-if="item.basicInfo.taskId != '-1'">{{item.basicInfo.processRateNum * 100}}%</span>-->
            </div>
            <tree v-show="item.show" v-if="item.children && item.children.length > 0" :data="item.children"
                  @on-children="toggle"></tree>
        </li>
    </ul>
</template>
<script>
    export default {
        name: "tree",
        props: {
            data: {
                type: Array,
                default: function () {
                    return []
                }
            },
        },
        data() {
            return {}
        },
        mounted() {
            this.$nextTick(() => {
                this.initStyle();
            })
        },
        methods: {
            initStyle() {
                let classNames = document.getElementsByClassName('l_tree_children_btn');
                for (let i = 0; i < classNames.length; i++) {
                    classNames[i].style.border = "0px solid #94979D";
                    classNames[i].style.color = "#94979D";
                    classNames[i].style.background = "#ffffff";
                }
            },

            toggleNode(item) {
                let idx = this.data.indexOf(item)
                if (this.data[idx]) {
                    this.$set(this.data[idx], 'show', !item.show)
                }
            },

            toggle(item) {

                if (item.basicInfo.taskId != '-1') {
                    this.$emit('on-children', item)
                }
                //样式
                this.defaultStyle();

                let classNames2 = document.getElementsByClassName('l_tree_children_btn');
                for (let i = 0; i < classNames2.length; i++) {
                    classNames2[i].style.border = "0px solid #94979D";
                    classNames2[i].style.color = "#fff";
                    classNames2[i].style.background = "#ffffff";
                }


                let objClass1 = document.getElementsByClassName(item.basicInfo.taskId)
                if (objClass1.length > 0 && objClass1[0].classList[1] == item.basicInfo.taskId && objClass1[0].classList[0] != 'el-tooltip') {
                    //  objClass1[0].style.color = "#fff";
                    objClass1[0].style.color = "#004892";
                    objClass1[0].style.fontWeight = 600
                    // objClass1[0].style.background = "#004892";
                } else {
                    objClass1[0].style.color = "#004892";
                    objClass1[0].style.fontWeight = 600
                }

                let objClass2 = document.getElementsByClassName('l_' + item.basicInfo.taskId)
                if (objClass2.length > 0 && objClass2[0].classList[1] == 'l_' + item.basicInfo.taskId) {
                    objClass2[0].style.border = "0px solid #004892";
                    objClass2[0].style.color = "#004892";
                }
            },

            defaultStyle() {
                let classNames1 = document.getElementsByClassName('folder');
                for (let i = 0; i < classNames1.length; i++) {
                    classNames1[i].style.color = "#000"
                    classNames1[i].style.fontWeight = 400
                    classNames1[i].style.background = "";
                }
            },

            setNodeColor(node) {
                if (!node)
                    return;
                let objClass1 = document.getElementsByClassName(node.basicInfo.taskId)
                if (objClass1.length > 0 && objClass1[0].classList[1] == node.basicInfo.taskId && objClass1[0].classList[0] != 'el-tooltip') {
                    //  objClass1[0].style.color = "#fff";
                    objClass1[0].style.color = "#004892";
                    objClass1[0].style.fontWeight = 600
                    // objClass1[0].style.background = "#004892";
                } else {
                    objClass1[0].style.color = "#004892";
                    objClass1[0].style.fontWeight = 600
                }
            },
            removeNodeColor(node) {
                let objClass1 = document.getElementsByClassName(node.basicInfo.taskId)
                if (objClass1.length > 0 && objClass1[0].classList[1] == node.basicInfo.taskId && objClass1[0].classList[0] != 'el-tooltip') {
                    objClass1[0].style.color = "#000";
                    objClass1[0].style.fontWeight = 400
                    objClass1[0].style.background = "#ffffff";
                } else {
                    objClass1[0].style.color = "#000";
                    objClass1[0].style.fontWeight = 400
                    objClass1[0].style.background = "#ffffff";
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/treeStyle.less';

    .process {
        position: absolute;
        right: 50px;
        color: #108EE9;
    }

    .folder {
        white-space: nowrap; /*强制单行显示*/
        text-overflow: ellipsis; /*超出部分省略号表示*/
        overflow: hidden; /*超出部分隐藏*/
        width: 100%; /*设置显示的最大宽度*/
        display: block;
    }
</style>
